<template>
  <div style="display: flex;justify-content: space-between;">
    <div id="mapChart"></div>
    <div style="display: flex;flex-direction: column;width: 320px;">
      <h1 style="text-align: center;">市内综合排名</h1>
      <div v-for=" (item, index) in chunList" :key="index" class="item">
        <h3 :style="{ color: index < 3 ? 'red' : 'black' }">TOP{{ index + 1 }}</h3>
        <span>{{ item.name }}</span>
        <span>{{ item.num }}</span>
      </div>
    </div>
  </div>
</template>
<script>
// import echarts from 'echarts'
import * as echarts from "echarts"; //echarts 官网引入方法
import pingtan from "../../assets/pingtan.json";
import fuzhou from "../../assets/fuzhou.json";
// Vue.prototype.$echarts = echarts
require("echarts"); // echarts theme
export default {
  name: "mapEchart",
  data() {
    return {
      chart: null,
      options: {},
      listArr: [], //城市json
      max: "", //最大value值
      min: "", // 最小value值
      type: 0,
      chunList: [
        {
          name: '鼓楼',
          num: 3480,
        },
        {
          name: '台江',
          num: 3473,
        },
        {
          name: '长乐',
          num: 3440,
        },
        {
          name: '平潭',
          num: 3434,
        },
        {
          name: '福清',
          num: 3420,
        },
        {
          name: '仓山',
          num: 3413,
        },
      ]
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    this.initOptions();
    this.initCharts();
  },
  methods: {
    initOptions() {
      this.options = {
        visualMap: {
          min: 5555,
          max: 3333333,
          show: false,
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"]
          }
        },
        title: {
          // text: "平潭综合实验区"
          text: "福州市地图"
        },
        series: [
          {
            type: "map",
            map: "福州",
            itemStyle: {
              normal: { label: { show: true } },
              emphasis: { label: { show: true } },
              emphasis: {
                areaColor: "#67C23A" //鼠标进入时的颜色
              }
            },
            data: this.listArr
          }
        ],
      };
    },
    getData() {
      // 获取城市名称数据  
      // console.log("取到的pingtan的json数据", pingtan);
      if (pingtan) {
        let arr = pingtan.features;
        // 循环取出 城市名称和value值
        for (var j = 0; j < arr.length; j++) {
          this.max = arr[0].id;
          this.min = arr[0].id;
          if (arr[j].id > this.max) {
            this.max = arr[j].id;
          }
          if (arr[j].id < this.min) {
            this.min = arr[j].id;
          }
          this.listArr.push({
            name: arr[j].properties.name,
            value: arr[j].id
          });
        }
      }
    },
    initCharts() {
      echarts.registerMap("福州", fuzhou);
      this.chart = echarts.init(document.getElementById("mapChart"));
      this.chart.setOption(this.options);
    }
  }
};
</script>

<style scoped>
.home {
  display: flex;
  justify-content: space-around;
}

.left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.buttom {
  width: 200px;
  margin: 20px;
}

.item {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

#mapChart {
  width: 400px;
  height: 400px;
}
</style>
